<template>
  <div id="app">
    <el-menu :default-active="activeIndex" router mode="horizontal">
      <el-menu-item index="1" :route="{path:'form'}">表单</el-menu-item>
      <el-menu-item index="2" :route="{path:'table'}">表格</el-menu-item>
      <el-menu-item index="3" :route="{path:'editTable'}">区域可编辑表格</el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  computed: {
    activeIndex() {
      return this.$route.name === 'form' ? '1' : this.$route.name === 'table' ? '2' : '3'
    }
  }
}
</script>
<style>
 .el-menu{
  margin-bottom: 30px;
 }
</style>
